<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./code/lazyLoadImg.js"></script> -->
</head>
<body>
    <!-- <div class="container">
        <p class="item1">1</p>
        <p class="item2">2</p>
        <p class="item3">3</p>
    </div> -->
    <div class="container">
        <p>haha1</p>
        <p>haha2</p>
        <p>haha3</p>
      </div>
    <script>
        const pList = document.getElementsByTagName('p')
        // const pList = document.querySelectorAll('p')
        console.log(pList);

        var container = document.querySelector('.container')
        var nodes = container.childNodes
        var p = document.createElement('p')
        p.textContent = 'haha4'
        container.append(p)
        console.log('nodes', container)
        console.log('nodes', nodes)
        console.log('nodesLength', nodes.length)
        
    </script>
</body>
</html>